<script setup lang="ts">
import { getHomeConfig } from '@/apis/root';
import { usePermissionStore } from '@/store/modules/permission';
import { isNumber } from '@vc/utils';
import ArrowActive from '../assets/arrow-active.png';
import ArrowInActive from '../assets/arrow-no-active.png';
import MenuItem from '@/components/menu-item/index.vue';
import { useRouterHelper } from 'vc/src/router';

const activeIndex = ref<boolean | number>(false);
const menuList = ref<any[]>([]);
const headList = ref<string[]>([]);
let timeoutid = ref();

const permissionStore = usePermissionStore();
useRequest(getHomeConfig, {
  onSuccess(res) {
    menuList.value = res.functions;
    permissionStore.setMenuList(menuList.value);
    for (const item of res.functions) {
      headList.value.push(item.fullName || item.name);
    }
  }
});

// 隐藏菜单
const handleHide = (e?, ishide = false) => {
  clearTimeout(timeoutid)
  if (ishide) {
    activeIndex.value = false;
    return;
  }
  const specialMenuCon = document.getElementsByClassName('special-menu-con')[0];

  if (!specialMenuCon.contains(e?.toElement || e?.relatedTarget)) {
    activeIndex.value = false;
  }
};

const router = useRouter();

const handleClick = () => {
  router.currentRoute.value.meta.activeIndex = activeIndex.value;
  handleHide();
};

// 菜单排列顺序
const listSortArr = [
  [[0,1], [2], [3], [4], [5,6], [7], [8]],
  [[0], [1], [2], [3], [4], [5], [6], [7], [8]],
  [[0], [1], [2], [3], [4], [5], [6], [7], [8]],
];

const { go } = useRouterHelper();

const clickItem = (index) => {
  if (menuList.value[index].functions && !menuList.value[index].url) {
    activeIndex.value = index;
  } else if (menuList.value[index].url) {
    go(menuList.value[index].url);
  }
};

defineExpose({
  activeIndex
});

function handleMouseEnter (index) {
  timeoutid = setTimeout(() => {
      menuList.value[index].functions && !menuList.value[index].url ? (activeIndex.value = index) : (activeIndex.value = false)
    }, 500);
}
</script>

<template>
  <div class="header-menu" @mouseleave="handleHide" v-if="menuList?.length">
    <div
      class="header-menu-tab"
      v-for="(item, index) in headList"
      :key="index"
      @mouseenter="handleMouseEnter(index)"
      :class="{ active: activeIndex === index && menuList[index].functions && !menuList[index].url }"
    >
      <span class="menu-item" @click="clickItem(index)">
        {{ item }}
        <vc-icon v-if="menuList[index].functions && !menuList[index].url" :icon="activeIndex === index ? ArrowActive : ArrowInActive" :size="16"/>
      </span>
    </div>
    <Teleport to="body">
      <transition name="vc-zoom-in-top">
        <div v-show="isNumber(activeIndex) && menuList[activeIndex].functions && !menuList[activeIndex].url" @mouseleave="(e) => handleHide(e, true)" class="special-menu-con">
          <div class="content">
            <div v-for="(item, index) in listSortArr[activeIndex]" :key="index" class="content-main">
              <template v-for="(subItem, subIndex) in item" :key="subIndex">
                <div class="content-col" v-if="menuList?.[activeIndex]?.functions?.[subItem]">
                  <menu-item
                    @click="handleClick"
                    isTopMenu
                    :title="menuList[activeIndex].functions[subItem]?.fullName || menuList[activeIndex].functions[subItem]?.name"
                    :list="menuList[activeIndex].functions[subItem]?.functions"
                  />
                </div>
              </template>
            </div>
          </div>
        </div>
      </transition>
    </Teleport>
  </div>
</template>

<style lang="scss">
.special-menu-con {
  position: fixed;
  left: 0;
  top: 40px;
  width: 100%;
  background: white;
  z-index: $top-menu-z-index;
  padding-top: 30px;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  @media screen and (max-width: 1280px) {
    padding-right: 4px;
  }

  .content {
    flex: 1 1 0;
    overflow: scroll;
    display: flex;
    padding-left: 300px;
    gap: 30px;
    min-height: 368px; 
    @include scroll-bar();

    .content-main {
      .content-col:not(:first-child) {
        margin-top: 40px;
      }
    }
  }

  .content-col-item {
    display: flex;
    flex-direction: column;
    min-width: 80px;
    max-width: 400px;
    margin-left: 30px;

    .item-title {
      font-weight: bold;
      font-size: 14px;
      color: #333333;
      line-height: 22px;
    }

    .item-content-wrapper{
      display: flex;
    }
    .item-content {
      flex-shrink: 0;
      margin-top: 16px;
      display: grid;
      grid-auto-flow: column;
      gap: 12px 0;
      position: relative;
      max-width: 196px;
      grid-template-columns: 1fr;
      .item {
        line-height: 16px;
        color: #666666;
        .item-con {
          cursor: pointer;
          &:hover {
              color: #02C680 !important;
            }
          .text {
            font-weight: 400;
            font-size: 13px;
            &:active {
              color: #02C680;
            }
            &:hover {
              color: #02C680;
            }
            &:focus {
              color: #02C680;
            }
            &.disabled{
              color: #BFBFBF;
              cursor: not-allowed;
            }
          }

          .count {
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            color: $color-primary;
            margin-left: 5px;
          }

          &:hover {
            color: $color-primary;
          }

          &.disable {
            color: #8b8c8c;
            cursor: not-allowed;

            .count {
              color: #8b8c8c;
            }
          }
        }
      }

      .more {
        font-size: 14px;
        color: $color-primary;
        line-height: 14px;

        .text {
          cursor: pointer;
        }
      }
    }
  }
}
</style>

<style scoped lang="scss">
@import './index.scss';
</style>
